<template>
  <div>
    <el-button @click="drawer = true" type="primary" style="margin-top: 1px; width: 100%;">
      查看全部
    </el-button>
    <el-drawer title="" :visible.sync="drawer" :with-header="false" direction="ltr" :withHeader="false" size="45%" class="drawers">
      <el-input placeholder="输入关键字进行过滤" v-model="filterText" style="margin-top: 60px;padding: 4px;"></el-input>
      <div class="device-tree">
        <el-scrollbar style="height:100%">
          <el-tree
            class="filter-tree"
            :data="list"
            :props="defaultProps"
            :default-expand-all="false"
            :filter-node-method="filterNode"
            ref="tree"
            @node-click="nodeClick">
          </el-tree>
        </el-scrollbar>
      </div>
    </el-drawer>
  </div>
</template>

<script>
export default {
    name: 'HomeTabpage',
    props: {
      list: Array
    },
    watch: {
      filterText(val) {
        this.$refs.tree.filter(val);
      }
    },
    methods: {
      filterNode(value, data) {
        if (!value) return true;
        return data.label.indexOf(value) !== -1;
      },
      nodeClick(data,node,Object) {
        if(data.path) {
          this.$router.push('/list/'+data.thirdId)
        }
      }
    },
    data() {
      return {
        drawer: false,
        filterText: '',
        defaultProps: {
          children: 'children',
          label: 'label'
        }
      }
    }
}
</script>

<style scoped>
  .device-tree {
    height: 510px;
    width: 100%;
  }
</style>